<template>
  <div class="resume-upload-container">
    <!-- 主标题区域 -->
    <div class="title-section">
      <h1 class="main-title">
        <el-icon class="title-icon"><Cpu /></el-icon>
        AI 简历分析器
      </h1>
      <p class="subtitle">基于国产大模型的智能简历分析，助力职业发展</p>
    </div>

    <!-- 上传分析区域 -->
    <div class="upload-section">
      <el-card class="upload-card" shadow="always">
        <template #header>
          <div class="card-header">
            <el-icon><Document /></el-icon>
            <span>简历内容输入</span>
          </div>
        </template>

        <!-- 行业选择区域 -->
        <div class="industry-selection">
          <div class="selection-header">
            <h3 class="selection-title">目标行业选择</h3>
          </div>
          <el-select
            v-model="selectedIndustry"
            placeholder="请选择您的目标行业"
            size="large"
            class="industry-select"
            :disabled="isAnalyzing"
            @change="handleIndustryChange"
          >
            <el-option
              v-for="industry in industries"
              :key="industry.value"
              :label="industry.label"
              :value="industry.value"
            >
              {{ industry.label }}
            </el-option>
          </el-select>
          
          <!-- 自定义行业输入框 -->
          <div v-if="selectedIndustry === 'other'" class="custom-industry-input">
            <el-input
              v-model="customIndustry"
              placeholder="请输入您所处的具体行业，如：新能源汽车、人工智能、生物制药等"
              size="large"
              :disabled="isAnalyzing"
              show-word-limit
              :maxlength="50"
              class="custom-input"
            >
              <template #prepend>
                <el-icon><Edit /></el-icon>
              </template>
            </el-input>
            <p class="custom-tip">请详细描述您的目标行业，这将帮助AI更准确地分析您的简历匹配度</p>
          </div>
          
          <p class="selection-tip">选择目标行业有助于提供更精准的简历分析和匹配度评分</p>
        </div>

        <!-- 简历输入区域 -->
        <div class="input-area">
          <el-input
            v-model="resumeText"
            type="textarea"
            :rows="12"
            placeholder="请在此处粘贴您的简历内容，包括个人信息、教育背景、工作经历、技能特长等..."
            :disabled="isAnalyzing"
            show-word-limit
            :maxlength="10000"
            class="resume-textarea"
          />
          
          <!-- 输入提示 -->
          <div class="input-tips">
            <el-alert
              title="输入提示"
              type="info"
              :closable="false"
              show-icon
            >
              <template #default>
                <ul class="tips-list">
                  <li>请确保简历内容完整，包含个人信息、教育背景、工作经历等</li>
                  <li>支持中英文简历，内容越详细分析结果越准确</li>
                  <li>建议字数在100-5000字之间，获得最佳分析效果</li>
                </ul>
              </template>
            </el-alert>
          </div>
        </div>

        <!-- 操作按钮区域 -->
        <div class="action-area">
          <el-button
            type="primary"
            size="large"
            :loading="isAnalyzing"
            :disabled="!canAnalyze || !selectedIndustry"
            @click="analyzeResume"
            class="analyze-button"
          >
            <el-icon v-if="!isAnalyzing"><TrendCharts /></el-icon>
            {{ isAnalyzing ? '分析中...' : '开始分析' }}
          </el-button>
          
          <el-button
            size="large"
            :disabled="isAnalyzing"
            @click="clearContent"
            class="clear-button"
          >
            <el-icon><Delete /></el-icon>
            清空内容
          </el-button>
        </div>

        <!-- 分析进度 -->
        <div v-if="isAnalyzing" class="progress-area">
          <el-progress
            :percentage="progressPercentage"
            :stroke-width="8"
            status="success"
            :show-text="false"
          />
          <p class="progress-text">{{ progressText }}</p>
        </div>
      </el-card>
    </div>

    <!-- 分析结果区域 -->
    <div v-if="analysisResult && !isAnalyzing" class="result-section">
      <ResultCard 
        :result="analysisResult" 
        @analyze-again="handleAnalyzeAgain"
      />
    </div>

    <!-- 功能特色展示 -->
    <div v-if="!analysisResult && !isAnalyzing" class="features-section">
      <h3 class="features-title">功能特色</h3>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6">
          <div class="feature-item">
            <el-icon class="feature-icon"><Key /></el-icon>
            <h4>技能关键词提取</h4>
            <p>智能识别简历中的技术栈和专业技能</p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <div class="feature-item">
            <el-icon class="feature-icon"><TrophyBase /></el-icon>
            <h4>优势劣势分析</h4>
            <p>深度分析个人优势和待改进项</p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <div class="feature-item">
            <el-icon class="feature-icon"><DataAnalysis /></el-icon>
            <h4>职业匹配度评分</h4>
            <p>基于市场需求评估职业匹配程度</p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6">
          <div class="feature-item">
            <el-icon class="feature-icon"><Promotion /></el-icon>
            <h4>优化建议</h4>
            <p>提供专业的简历改进建议</p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Cpu, 
  Document, 
  TrendCharts, 
  Delete, 
  Key, 
  TrophyBase, 
  DataAnalysis, 
  Promotion,
  Briefcase,
  Edit
} from '@element-plus/icons-vue'
import ResultCard from '../components/ResultCard.vue'
import { resumeAPI } from '../utils/api.js'

export default {
  name: 'ResumeUpload',
  components: {
    ResultCard,
    Cpu,
    Document,
    TrendCharts,
    Delete,
    Key,
    TrophyBase,
    DataAnalysis,
    Promotion,
    Briefcase,
    Edit
  },
  setup() {
    // 响应式数据
    const resumeText = ref('')
    const isAnalyzing = ref(false)
    const analysisResult = ref(null)
    const progressPercentage = ref(0)
    const progressText = ref('')
    const selectedIndustry = ref('')
    const customIndustry = ref('')

    // 行业选项数据
    const industries = ref([
      { value: 'technology', label: '互联网/科技' },
      { value: 'finance', label: '金融/银行' },
      { value: 'education', label: '教育/培训' },
      { value: 'healthcare', label: '医疗/健康' },
      { value: 'manufacturing', label: '制造业' },
      { value: 'retail', label: '零售/电商' },
      { value: 'consulting', label: '咨询/服务' },
      { value: 'media', label: '媒体/广告' },
      { value: 'real_estate', label: '房地产' },
      { value: 'logistics', label: '物流/运输' },
      { value: 'government', label: '政府/公共事业' },
      { value: 'other', label: '其他行业' }
    ])

    // 计算属性
    const canAnalyze = computed(() => {
      const hasValidIndustry = selectedIndustry.value && 
        (selectedIndustry.value !== 'other' || (selectedIndustry.value === 'other' && customIndustry.value.trim().length >= 2))
      return resumeText.value.trim().length >= 10 && !isAnalyzing.value && hasValidIndustry
    })

    // 处理行业选择变化
    const handleIndustryChange = (value) => {
      if (value !== 'other') {
        customIndustry.value = ''
      }
    }

    // 获取实际的行业值（用于API调用）
    const getActualIndustry = () => {
      if (selectedIndustry.value === 'other') {
        return customIndustry.value.trim()
      }
      return selectedIndustry.value
    }

    // 分析简历
    const analyzeResume = async () => {
      if (!canAnalyze.value) {
        if (!selectedIndustry.value) {
          ElMessage.warning('请先选择目标行业')
          return
        }
        ElMessage.warning('请输入至少10个字符的简历内容')
        return
      }

      try {
        isAnalyzing.value = true
        analysisResult.value = null
        
        // 模拟分析进度
        await simulateProgress()
        
        // 调用API分析简历，包含行业信息
        const response = await resumeAPI.analyze(resumeText.value.trim(), getActualIndustry())
        
        if (response.success) {
          console.log('API Response:', response)
          console.log('matchScore from API:', response.matchScore)
          
          analysisResult.value = {
            keywords: response.keywords || [],
            strengths: response.strengths || '',
            weaknesses: response.weaknesses || '',
            suggestions: response.suggestions || '',
            matchScore: response.matchScore !== undefined ? response.matchScore : 0,
            industry: getActualIndustry()
          }
          
          console.log('analysisResult.value:', analysisResult.value)
          console.log('Final matchScore:', analysisResult.value.matchScore)
          
          ElMessage.success('简历分析完成！')
          
          // 滚动到结果区域
          setTimeout(() => {
            const resultSection = document.querySelector('.result-section')
            if (resultSection) {
              resultSection.scrollIntoView({ behavior: 'smooth' })
            }
          }, 100)
        } else {
          throw new Error(response.message || '分析失败')
        }
        
      } catch (error) {
        console.error('分析失败:', error)
        ElMessage.error(error.message || '分析失败，请稍后重试')
      } finally {
        isAnalyzing.value = false
      }
    }

    // 模拟分析进度
    const simulateProgress = () => {
      return new Promise((resolve) => {
        const steps = [
          { percentage: 20, text: '正在解析简历内容...' },
          { percentage: 40, text: '提取技能关键词...' },
          { percentage: 60, text: '分析优势劣势...' },
          { percentage: 80, text: '计算匹配度评分...' },
          { percentage: 100, text: '生成分析报告...' }
        ]
        
        let currentStep = 0
        
        const updateProgress = () => {
          if (currentStep < steps.length) {
            const step = steps[currentStep]
            progressPercentage.value = step.percentage
            progressText.value = step.text
            currentStep++
            setTimeout(updateProgress, 800)
          } else {
            resolve()
          }
        }
        
        updateProgress()
      })
    }

    // 清空内容
    const clearContent = async () => {
      if (resumeText.value.trim().length > 0) {
        try {
          await ElMessageBox.confirm(
            '确定要清空所有内容吗？',
            '确认清空',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }
          )
          
          resumeText.value = ''
          selectedIndustry.value = ''
          customIndustry.value = ''
          analysisResult.value = null
          ElMessage.success('内容已清空')
        } catch {
          // 用户取消操作
        }
      }
    }

    // 重新分析
    const handleAnalyzeAgain = () => {
      analysisResult.value = null
      // 滚动到输入区域
      const uploadSection = document.querySelector('.upload-section')
      if (uploadSection) {
        uploadSection.scrollIntoView({ behavior: 'smooth' })
      }
    }

    // 组件挂载时的操作
    onMounted(() => {
      // 检查后端服务状态
      checkBackendStatus()
    })

    // 检查后端服务状态
    const checkBackendStatus = async () => {
      try {
        await resumeAPI.healthCheck()
        console.log('后端服务连接正常')
      } catch (error) {
        console.warn('后端服务连接失败:', error)
        ElMessage.warning('后端服务暂时不可用，部分功能可能受影响')
      }
    }

    return {
      resumeText,
      isAnalyzing,
      analysisResult,
      progressPercentage,
      progressText,
      selectedIndustry,
      customIndustry,
      industries,
      canAnalyze,
      analyzeResume,
      clearContent,
      handleAnalyzeAgain,
      handleIndustryChange,
      getActualIndustry
    }
  }
}
</script>

<style scoped>
.resume-upload-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 标题区域 */
.title-section {
  text-align: center;
  margin-bottom: 40px;
}

.main-title {
  font-size: 36px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.title-icon {
  font-size: 40px;
  color: #667eea;
}

.subtitle {
  font-size: 16px;
  color: #7f8c8d;
  margin: 0;
  line-height: 1.6;
}

/* 上传区域 */
.upload-section {
  margin-bottom: 40px;
}

.upload-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.card-header .el-icon {
  font-size: 22px;
  margin-right: 10px;
  color: #667eea;
}

/* 输入区域 */
.input-area {
  margin-bottom: 30px;
}

/* 行业选择区域 */
.industry-selection {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 12px;
  border: 1px solid #e9ecef;
}

.selection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  position: relative;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6c757d;
  font-size: 14px;
}

.header-icon {
  font-size: 18px;
  color: #667eea;
}

.header-label {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.selection-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.industry-select {
  width: 100%;
  margin-bottom: 10px;
}

.industry-select :deep(.el-select__wrapper) {
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s ease;
}

.industry-select :deep(.el-select__wrapper):hover {
  border-color: #c0c4cc;
}

.industry-select :deep(.el-select__wrapper.is-focused) {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.industry-select :deep(.el-select-dropdown__item) {
  padding: 12px 20px;
  font-size: 14px;
  line-height: 1.4;
}

.industry-select :deep(.el-select-dropdown__item):hover {
  background-color: #f5f7fa;
}



/* 自定义行业输入区域 */
.custom-industry-input {
  margin-top: 15px;
  padding: 15px;
  background-color: #ffffff;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.custom-industry-input:hover {
  border-color: #c0c4cc;
}

.custom-input {
  margin-bottom: 10px;
}

.custom-input :deep(.el-input-group__prepend) {
  background-color: #f5f7fa;
  border-color: #dcdfe6;
  color: #667eea;
}

.custom-input :deep(.el-input__wrapper) {
  border-radius: 0 8px 8px 0;
  border: 1px solid #dcdfe6;
  transition: all 0.3s ease;
}

.custom-input :deep(.el-input__wrapper):hover {
  border-color: #c0c4cc;
}

.custom-input :deep(.el-input__wrapper.is-focus) {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.custom-tip {
  margin: 0;
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
  font-style: italic;
}

.selection-tip {
  margin: 0;
  font-size: 13px;
  color: #6c757d;
  line-height: 1.4;
}

/* 输入区域 */
.input-area {
  margin-bottom: 30px;
}

.resume-textarea {
  margin-bottom: 20px;
}

.resume-textarea :deep(.el-textarea__inner) {
  border-radius: 12px;
  border: 2px solid #e4e7ed;
  font-size: 14px;
  line-height: 1.6;
  transition: all 0.3s ease;
}

.resume-textarea :deep(.el-textarea__inner):focus {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.input-tips {
  margin-top: 15px;
}

.tips-list {
  margin: 0;
  padding-left: 20px;
  color: #606266;
}

.tips-list li {
  margin: 5px 0;
  line-height: 1.5;
}

/* 操作区域 */
.action-area {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.analyze-button {
  padding: 15px 40px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  transition: all 0.3s ease;
}

.analyze-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.clear-button {
  padding: 15px 30px;
  font-size: 16px;
  border-radius: 12px;
  border: 2px solid #dcdfe6;
  transition: all 0.3s ease;
}

.clear-button:hover:not(:disabled) {
  border-color: #f56c6c;
  color: #f56c6c;
}

/* 进度区域 */
.progress-area {
  text-align: center;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 12px;
  margin-top: 20px;
}

.progress-text {
  margin: 15px 0 0 0;
  color: #606266;
  font-size: 14px;
  font-weight: 500;
}

/* 功能特色区域 */
.features-section {
  margin-top: 60px;
  padding: 40px 0;
  background-color: #fafbfc;
  border-radius: 16px;
}

.features-title {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 40px 0;
}

.feature-item {
  text-align: center;
  padding: 30px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  margin-bottom: 20px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  font-size: 48px;
  color: #667eea;
  margin-bottom: 15px;
}

.feature-item h4 {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 10px 0;
}

.feature-item p {
  font-size: 14px;
  color: #7f8c8d;
  margin: 0;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .resume-upload-container {
    padding: 0 15px;
  }
  
  .upload-card {
    margin: 0 auto;
  }
  
  .industry-select {
    width: 100%;
  }
  
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* 移动端优化 - 基础容器 */
@media (max-width: 768px) {
  .resume-upload-container {
    padding: 0 12px;
    min-height: 100vh;
  }
  
  /* 标题区域优化 */
  .title-section {
    padding: 20px 0 30px 0;
    text-align: center;
  }
  
  .main-title {
    font-size: 26px;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    margin-bottom: 12px;
  }
  
  .title-icon {
    font-size: 28px;
  }
  
  .subtitle {
    font-size: 15px;
    text-align: center;
    line-height: 1.5;
    color: #666;
    margin: 0;
  }
  
  /* 卡片区域优化 */
  .upload-card {
    margin: 0 0 20px 0;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  }
  
  .card-header {
    padding: 16px 0;
    font-size: 17px;
    font-weight: 600;
  }
  
  /* 行业选择区域优化 */
  .industry-selection {
    margin-bottom: 25px;
    padding: 16px;
    background-color: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e9ecef;
  }
  
  .selection-header {
    margin-bottom: 16px;
  }
  
  .selection-title {
    font-size: 18px;
    margin: 0;
    color: #333;
    font-weight: 600;
    position: static;
    transform: none;
    text-align: left;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    text-shadow: none;
  }
  
  .industry-select {
    width: 100%;
    margin-bottom: 12px;
  }
  
  .industry-select :deep(.el-select__wrapper) {
    height: 48px;
    font-size: 16px;
    border-radius: 12px;
  }
  
  .selection-tip {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    margin: 8px 0 0 0;
  }
  
  /* 自定义行业输入优化 */
  .custom-industry-input {
    margin-top: 16px;
    padding: 12px;
    background-color: #ffffff;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
  }
  
  .custom-input :deep(.el-input__wrapper) {
    height: 48px;
    font-size: 16px;
    border-radius: 12px;
  }
  
  .custom-tip {
    font-size: 12px;
    color: #888;
    margin: 8px 0 0 0;
    line-height: 1.4;
  }
  
  /* 简历输入区域优化 */
  .input-area {
    margin-bottom: 25px;
  }
  
  .resume-textarea :deep(.el-textarea__inner) {
    border-radius: 12px;
    padding: 16px;
    line-height: 1.6;
    font-size: 16px;
    min-height: 200px;
    border: 2px solid #e4e7ed;
  }
  
  /* 输入提示优化 */
  .input-tips {
    margin-top: 16px;
  }
  
  .input-tips :deep(.el-alert) {
    border-radius: 12px;
    padding: 12px 16px;
  }
  
  .tips-list {
    text-align: left;
    margin: 0;
    padding-left: 16px;
  }
  
  .tips-list li {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 6px;
    color: #666;
  }
  
  /* 操作按钮区域优化 */
  .action-area {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
  }
  
  .analyze-button,
  .clear-button {
    width: 100%;
    max-width: none;
    height: 50px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
  }
  
  .analyze-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
  }
  
  .clear-button {
    background: #f8f9fa;
    color: #666;
    border: 1px solid #e9ecef;
  }
  
  /* 进度区域优化 */
  .progress-area {
    padding: 24px 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 16px;
    margin: 20px 0;
  }
  
  .progress-text {
    font-size: 15px;
    color: #555;
    margin-top: 12px;
  }
  
  /* 功能特色区域优化 */
  .features-section {
    margin-top: 30px;
    padding: 30px 16px;
    background: linear-gradient(135deg, #fafbfc 0%, #f1f3f4 100%);
    border-radius: 20px;
  }
  
  .features-title {
    font-size: 22px;
    margin-bottom: 24px;
    color: #333;
  }
  
  .feature-item {
    height: auto;
    padding: 24px 20px;
    text-align: center;
    border-radius: 16px;
    background: white;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 16px;
  }
  
  .feature-icon {
    font-size: 36px;
    margin-bottom: 12px;
  }
  
  .feature-item h4 {
    font-size: 17px;
    margin-bottom: 8px;
    color: #333;
  }
  
  .feature-item p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
  }
}

/* 小屏手机优化 */
@media (max-width: 480px) {
  .resume-upload-container {
    padding: 0 10px;
  }
  
  .title-section {
    padding: 16px 0 24px 0;
  }
  
  .main-title {
    font-size: 24px;
  }
  
  .title-icon {
    font-size: 26px;
  }
  
  .subtitle {
    font-size: 14px;
  }
  
  .upload-card {
    border-radius: 14px;
  }
  
  .card-header {
    font-size: 16px;
    padding: 14px 0;
  }
  
  .selection-title {
    font-size: 17px;
  }
  
  .industry-select .el-input__inner,
  .custom-input .el-input__inner {
    height: 44px;
    font-size: 15px;
  }
  
  .resume-textarea .el-textarea__inner {
    padding: 14px;
    font-size: 15px;
    min-height: 180px;
  }
  
  .analyze-button,
  .clear-button {
    height: 44px;
    font-size: 15px;
  }
  
  .features-section {
    padding: 24px 12px;
    margin-top: 24px;
  }
  
  .features-title {
    font-size: 20px;
  }
  
  .feature-item {
    padding: 20px 16px;
  }
  
  .feature-icon {
    font-size: 32px;
  }
  
  .feature-item h4 {
    font-size: 16px;
  }
  
  .feature-item p {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .resume-upload-container {
    padding: 0 8px;
  }
  
  .main-title {
    font-size: 24px;
  }
  
  .subtitle {
    font-size: 14px;
    line-height: 1.4;
  }
  
  .upload-card {
    margin: 15px 0;
  }
  
  .card-header span {
    font-size: 16px;
  }
  
  .selection-title {
    font-size: 16px;
  }
  
  .selection-tip {
    font-size: 12px;
  }
  
  .resume-textarea {
    font-size: 16px;
  }
  
  .analyze-button,
  .clear-button {
    font-size: 16px;
    padding: 12px 20px;
  }
  
  .feature-item {
    padding: 20px 12px;
  }
  
  .feature-icon {
    font-size: 32px;
  }
  
  .feature-title {
    font-size: 16px;
  }
  
  .feature-description {
    font-size: 13px;
  }
  
  .features-section {
    padding: 25px 10px;
  }
  
  .features-title {
    font-size: 22px;
  }
}
</style>